<template>
    <n-layout has-sider w-full h-full dark:bg-dark>
        <n-layout-sider hidden sm-block bordered collapse-mode="width" dark:bg-dark :collapsed-width="64" :width="220"
            :native-scrollbar="false" :collapsed="appStore.collapsed">
            <SideBar />
        </n-layout-sider>

        <article flex-1 flex-col>
            <header mb10 class="bg-white px-15 border-b b-gray-2 b-b-solid flex items-center" dark="bg-dark bc-444 b-gray-7"
                :style="`height: ${header.height}px`">
                <AppHeader />
            </header>

            <section v-if="tabs.visible" m10 border-b bc-eee dark:bg-dark dark:border-0 hidden sm:block>
                <AppTabs />
            </section>

            <section pl-15 pr-15 flex-1 overflow-hidden bg-hex-fff dark:bg-dark :style="`padding-bottom: ${footer.height}px`">
                <AppMain />
            </section>

            <footer sm-hidden class="bg-white px-15 border-t b-t-1 b-solid b-gray-2 bc-eee flex items-center"
                position-absolute bottom-0 left-0 right-0 dark="bg-dark bc-444 b-gray-7"
                :style="`height: ${footer.height}px`">
                <AppFooter />
            </footer>
        </article>
    </n-layout>
</template>
  
<script setup>
import AppHeader from "./AppHeader.vue";
import AppFooter from "./AppFooter.vue";
import AppMain from "./AppMain.vue";
import AppTabs from "./AppTabs.vue";
import SideBar from "./Sidebar.vue";
import { useAppStore } from "@/stores/app";
import { header, footer, tabs } from "@/settings";

const appStore = useAppStore();
</script>